<ix-modal-header
  [title]="title()"
  [loading]="isLoading()"
></ix-modal-header>

<mat-card>
  <mat-card-content>
    <form class="ix-form-container" [formGroup]="form" (submit)="onSubmit()">
      <ix-fieldset>
        <!-- TODO: Code is similar to the form in instance wizard -->
        @if (isVm) {
          <div class="image-field">
            <ix-input
              class="input"
              formControlName="source"
              [readonly]="true"
              [label]="'Volume' | translate"
              [required]="true"
            ></ix-input>

            <button
              mat-button
              ixTest="browse-isos"
              type="button"
              (click)="onSelectVolume()"
            >{{ 'Select Volume' | translate }}</button>
          </div>
        } @else {
          <ix-explorer
            formControlName="source"
            [rootNodes]="[slashRootNode]"
            [label]="'Source' | translate"
            [required]="true"
            [nodeProvider]="datasetProvider"
            [canCreateDataset]="isNew()"
          ></ix-explorer>
        }

        @if (form.controls.io_bus.enabled) {
          <ix-select
            formControlName="io_bus"
            [label]="'I/O Bus' | translate"
            [required]="true"
            [options]="diskIoBusOptions$"
          ></ix-select>
        }

        @if (form.controls.destination.enabled) {
          <ix-input
            formControlName="destination"
            [label]="'Destination' | translate"
            [required]="true"
          ></ix-input>
        }
      </ix-fieldset>

      <ix-form-actions>
        <button
          mat-button
          type="submit"
          color="primary"
          ixTest="save"
          [disabled]="form.invalid || isLoading()"
        >
          {{ 'Save' | translate }}
        </button>
      </ix-form-actions>
    </form>
  </mat-card-content>
</mat-card>
